<template>
  <n-grid cols="1" responsive="screen" class="-mt-4">
    <n-grid-item>
      <n-list>
        <n-list-item>
          <template #suffix>
            <n-button type="primary" text @click="handleOpenModel">修改</n-button>
          </template>
          <n-thing title="账户密码">
            <template #description><span class="text-gray-400">绑定手机和邮箱，并设置密码，帐号更安全</span></template>
          </n-thing>
        </n-list-item>
      </n-list>
    </n-grid-item>
  </n-grid>

  <n-modal v-model:show="showModal" :show-icon="false" preset="dialog" title="修改密码">
    <n-alert title="密码规则提示" type="info" closable>
      包含至少一个大写字母、一个小写字母、一个数字和一个特殊字符，并且长度至少为8个字符。
    </n-alert>
    <n-form :model="fromValues" :rules="rules" ref="formRef" label-placement="top" :label-width="120" class="py-4">
      <n-form-item label="旧密码" path="oldPassword">
        <n-input type="password" showPasswordOn="click" maxlength="100" show-count placeholder="请输入旧密码" v-model:value="fromValues.oldPassword" />
      </n-form-item>
      <n-form-item label="新密码" path="newPassword">
        <n-input type="password" showPasswordOn="click" maxlength="100" show-count placeholder="请输入新密码" v-model:value="fromValues.newPassword" />
      </n-form-item>
      <n-form-item label="确认密码" path="confirmPassword">
        <n-input type="password" showPasswordOn="click" maxlength="100" show-count v-model:value="fromValues.confirmPassword"
          placeholder="请输入确认密码" />
      </n-form-item>
    </n-form>
    <div style="justify-content: end;display: flex;">
      <n-space>
        <n-button ghost icon-placement="left" @click="handleCloseModel">
          取消
        </n-button>
        <n-button type="primary" :loading="formBtnLoading" @click="onSubmit">提交</n-button>
      </n-space>
    </div>
  </n-modal>
</template>

<script lang="ts" setup>
import { reactive, ref, unref } from 'vue';
import { useMessage } from 'naive-ui';
import { updatePassword } from '@/api/system/user';
import { ResultEnum } from '@/enums/httpEnum';
import { encrypt } from '@/utils/CryptoUtil';
const showModal = ref<boolean>(false);
const message = useMessage();
const formRef = ref();
const formBtnLoading = ref<boolean>(false);
const defaultValueRef = () => ({
  /*** 旧密码*/
  oldPassword: '',
  /*** 新密码*/
  newPassword: '',
  /*** 确认密码*/
  confirmPassword: '',
})
let fromValues = reactive(defaultValueRef());
const rules = {
  oldPassword: {
    required: true,
    trigger: ['blur', 'input'],
    message: '请输入旧密码',
  },
  newPassword: [
    {
      required: true,
      trigger: ['blur', 'input'],
      message: '请输入新密码',
    },
    { pattern: /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&*()_+\-=[\]{};':"\\|,.<>\/?]).{8,}$/, trigger: ['blur', 'input'], message: '密码过于简单' },
  ],
  confirmPassword: [
    {
      required: true,
      trigger: ['blur', 'input'],
      message: '请输入确认密码',
    },
    { pattern: /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&*()_+\-=[\]{};':"\\|,.<>\/?]).{8,}$/, trigger: ['blur', 'input'], message: '密码过于简单' },
  ],
}
const handleOpenModel = () => {
  showModal.value = true;
}
const handleCloseModel = () => {
  showModal.value = false;
  fromValues = Object.assign(unref(fromValues), defaultValueRef());
}
const onSubmit = () => {
  formRef.value.validate(async (errors) => {
    if (!errors) {
      formBtnLoading.value = true;
      fromValues.oldPassword = encrypt(fromValues.oldPassword);
      fromValues.newPassword = encrypt(fromValues.newPassword);
      fromValues.confirmPassword = encrypt(fromValues.confirmPassword);
      const data = await updatePassword(fromValues);
      if (data.code !== ResultEnum.SUCCESS) {
        const resultMsg = data.data ? data.data : '';
        message.error(data.mesg + '-' + resultMsg);
        formBtnLoading.value = false;
      }
      if (data.code === ResultEnum.SUCCESS) {
        message.success(data.mesg);
        showModal.value = false;
        formBtnLoading.value = false;
        fromValues = Object.assign(unref(fromValues), defaultValueRef());
      }
    }
  })
}
</script>
